<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>充值商户后台</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../static/x-admin/css/font.css">
    <link rel="stylesheet" href="../static/x-admin/css/xadmin.css">
    <link rel="stylesheet" href="../static/x-admin/lib/layui/css/layui.css">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script src="../static/x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/x-admin/js/xadmin.js"></script>
    <script type="text/javascript" src="../static/js/jquery-3.5.1.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="layui-fluid">
    <div class="layui-card">
{{/*        <div class="layui-card-header"><strong>首页 / 比例模板</strong></div>*/}}
        <div class="layui-card-body">
            <table id="demo" lay-filter="test"></table>


            <script type="text/html" id="toolbarHead">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="create-templete"><i class="layui-icon layui-icon-add-1"></i>创建模板</button>
                </div>
            </script>


            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="edit-templete"><i class="layui-icon layui-icon-edit"></i> 编辑</button>
                    <button class="layui-btn layui-btn-danger" lay-event="delete-templete"><i class="layui-icon layui-icon-delete"></i>删除</button>
                </div>
            </script>

            <script>
                layui.use('table', function(){
                    let table = layui.table;

                    //第一个实例
                    table.render({
                        elem: '#demo'
                        ,height: 500
                        // ,width: 480
                        ,url: '/static/data/json.json' //数据接口
                        ,page: true //开启分页
                        ,limits: [10, 20, 30, 50, 100, 200]
                        ,cols: [[ //表头
                            {field: 'id', title: 'ID', sort: true, fixed: 'left'}
                            ,{field: 'username', title: '用户名', width:80}
                            ,{field: 'sex', title: '性别', sort: true}
                            ,{field: 'city', title: '城市'}
                            ,{field: 'sign', title: '签名'}
                            ,{field: 'experience', title: '积分', sort: true}
                            ,{field: 'score', title: '评分',  sort: true}
                            ,{field: 'classify', title: '职业'}
                            ,{field: 'wealth', title: '财富', sort: true}
                            ,{fixed: 'right', title: "操作", width:180, align:'center', toolbar: '#toolbarDemo'}
                        ]]
                        ,toolbar: "#toolbarHead"
                    });

                    // 监听头工具栏事件
                    table.on('toolbar(test)', function (obj) {
                        let event = obj.event;
                        // 头工具栏的监听事件
                        if (event === "create-templete") {
                            location.href = "/templeteAdd.html";
                        }
                    });

                    //监听行工具栏事件
                    table.on('tool(test)', function (obj) {
                        let  data = obj.data;

                        let event = obj.event;

                        // 编辑行内容
                        if (event === "edit-templete") {
                            layer.msg("编辑该行的内容");
                        }

                        // 删除该行
                        if (event === "delete-templete") {
                            layer.confirm("确定删除该行？", function (index) {
                                obj.del();
                                layer.close(index);
                            })
                        }
                    })
                });
            </script>
        </div>
    </div>
</div>

</body>


</html>